/// <reference path="../../../../Scripts/Jquery/jquery-1.7.1-vsdoc.js" />

function InitThemer(basePath) {
    if (typeof (basePath) == 'undefined')
        basePath = '';
    var baseColor = "#494949";
    var background = "#000";
    var highlightColor = "#F90";
    var textColor = "#2C2C2C";
    var imgContent = "images/paper.png";
    updateBackground(null, false);
    var patterns = {
        Paper: {
            name: "Paper",
            img: "images/paper.png"
        },
        Blueprint: {
            name: "Blueprint",
            img: "images/blueprint.png"
        },
        Bricks: {
            name: "Bricks",
            img: "images/bricks.png"
        },
        Carbon: {
            name: "Carbon",
            img: "images/carbon.png"
        },
        Circuit: {
            name: "Circuit",
            img: "images/circuit.png"
        },
        Holes: {
            name: "Holes",
            img: "images/holes.png"
        },
        Mozaic: {
            name: "Mozaic",
            img: "images/mozaic.png"
        },
        Roof: {
            name: "Roof",
            img: "images/roof.png"
        },
        Stripes: {
            name: "Stripes",
            img: "images/stripes.png"
        }
    };

    var presets = {
        Default: {
            name: "Default",
            baseColor: "494949",
            background: "000",
            highlightColor: "F90",
            textColor: "2C2C2C"
        },
        Autumn: {
            name: "Autumn",
            baseColor: "363d1b",
            background: "756411",
            highlightColor: "947131",
            textColor: "ffb575"
        },
        Winter: {
            name: "Winter",
            baseColor: "bababa",
            background: "fff",
            highlightColor: "808080",
            textColor: "fff"
        },
        Hot: {
            name: "Hot",
            baseColor: "4f1b1b",
            background: "ff3714",
            highlightColor: "e8cb10",
            textColor: "f7ff00"
        },
        Sea: {
            name: "Sea",
            baseColor: "192a54",
            background: "0d0070",
            highlightColor: "88a9eb",
            textColor: "8affe2"
        }
    };

    var backgroundTargets =
	[
		"body"
	];
    var backgroundContents =
	[
		"#content"
	];
    var baseColorTargets =
	[
		"div#head",
	 	"div.bg-sidebar",
	 	"div#content .bloc .title",
		"ul.accordion > li > a"

	];

    var borderColorTargets =
	[
	 	"div#head"

	];

    var highlightColorTargets =
	[
		"div#head",
		"div#footer",
		"div.bg-sidebar"
	];

    var textTargets =
	[
		"div#content .bloc .title",
		"div#head .account",
		"div#footer p"
	];

    var themersavecss = $('#themer-savecss');
    var urlBase = $(themersavecss).attr('UrlBase');
    var Url = $(themersavecss).attr('ctr');

    $(themersavecss).bind("click", function (event) {
        var _alert = 'do you want save?';
        jConfirm(_alert, '~', function (r) {
            if (r) {
                var css = generateCSS(urlBase);
                var _encodeCss = encodeURIComponent(css);
                $.ajax({
                    url: Url,
                    data: $.toJSON({ Css: _encodeCss }),
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (result) {
                        console.log(result);
                        if (result != 'err')
                            Solution.Admin.Core.ShowNotif('s', 0);
                        else
                            Solution.Admin.Core.ShowNotif('e', -1);

                    },
                    error: function () {
                        Solution.Admin.Core.ShowNotif('e', -1, 'Ajax error');
                    }
                });
                event.preventDefault();
            } 
        });
    });

    $("#themer-getcss").bind("click", function (event) {
        //$("#themer-css-dialog textarea").val(generateCSS("../"));
        //$("#themer-css-dialog").dialog("open");
        $("#viewCSS").val(generateCSS("../"));
        $("#viewCSS").css('height', '300px');
        event.preventDefault();
    });

    var presetDd = $('<select id="theme-presets"></select>');
    for (var i in presets) {
        var option = $("<option></option>").text(presets[i].name).val(i);
        presetDd.append(option);
    }
    $("#theme-presets-container").append(presetDd);

    presetDd.bind('change', function (event) {
        updateBaseColor(presets[presetDd.val()].baseColor);
        updateHeighlightColor(presets[presetDd.val()].highlightColor);
        updateTextColor(presets[presetDd.val()].textColor);
        updateBackgroundColor(presets[presetDd.val()].background)

        event.preventDefault();
    });


    var patternDd = $('<select id="theme-patterns"></select>');
    for (var i in patterns) {
        var option = $("<option></option>").text(patterns[i].name).val(i);
        patternDd.append(option);
    }
    $("#theme-pattern-container").append(patternDd);

    patternDd.bind('change', function (event) {
        updateBackground(patterns[patternDd.val()].img, true);
        event.preventDefault();
    });

    $("div#themer #themer-toggle").bind("click", function (event) {
        if ($(this).hasClass("opened")) {
            $(this).toggleClass("opened").parent().animate({ right: "0" }, "slow");
        } else {
            $(this).toggleClass("opened").parent().animate({ right: "256" }, "slow");
        }
    });

    $("div#themer #textglow-op").slider({
        range: "min",
        min: 0,
        max: 100,
        value: 50,
        slide: function (event, ui) {
            alpha = ui.value * 1.0 / 100.0;
            updateTextGlowColor(null, alpha);
        }
    });

    $("div#themer #themer-css-dialog").dialog({
        autoOpen: false,
        title: "Theme CSS",
        width: 500,
        modal: true,
        resize: false,
        buttons: {
            "Close": function () { $(this).dialog("close"); }
        }
    });

    $("#base-cp").ColorPicker({
        color: baseColor,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            updateBaseColor(hex, true);
        }
    });

    $("#highlight-cp").ColorPicker({
        color: highlightColor,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            updateHeighlightColor(hex, true);
        }
    });
    $("#Background-cp").ColorPicker({
        color: background,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            updateBackgroundColor(hex, true);
        }
    });

    $("#text-cp").ColorPicker({
        color: textColor,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            updateTextColor(hex, true);
        }
    });

    function updateBackground(_url, _pattern) {
        if (!_pattern) {
            $("#text-cp").css('background-color', textColor);
            $("#Background-cp").css('background-color', background);
            $("#highlight-cp").css('background-color', highlightColor);
            $("#base-cp").css('background-color', baseColor);
        }
        else {
            //backgroundContents
            imgContent = _url;
            jQuery.each(backgroundContents, function (i, val) {
                //$(val).css('background-image', '"'+imgContent+'"');
                $(val).css("background", "url(" + basePath + imgContent + ")");
            });

        }

    }

    function updateBaseColor(hex, attach) {
        baseColor = "#" + hex;
        $("#base-cp").css('backgroundColor', baseColor);
        jQuery.each(baseColorTargets, function (i, val) {
            $(val).css('backgroundColor', baseColor);
        });
        if (attach === true)
            attachStylesheet();
    }
    function updateHeighlightColor(hex, attach) {
        highlightColor = "#" + hex;
        $("#highlight-cp").css('backgroundColor', highlightColor);
        jQuery.each(highlightColorTargets, function (i, val) {
            $(val).css('border-color', highlightColor);
        });
        if (attach === true)
            attachStylesheet();
    }

    function updateBackgroundColor(hex, attach) {
        background = "#" + hex;
        $("#Background-cp").css('backgroundColor', background);
        $("body").css('backgroundColor', background);
    }

    function updateTextColor(hex, attach) {
        textColor = "#" + hex;
        $("#text-cp").css('backgroundColor', textColor);
        jQuery.each(textTargets, function (i, val) {
            $(val).css('color', textColor);
        });
        if (attach === true)
            attachStylesheet();
    }

    function updateTextGlowColor(rgb, alpha, attach) {
        if (rgb != null) {
            textGlowColor.r = rgb["r"];
            textGlowColor.g = rgb["g"];
            textGlowColor.b = rgb["b"];
            textGlowColor.a = alpha;
        } else {
            textGlowColor.a = alpha;
        }

        $("div#themer #textglow-op").slider("value", textGlowColor.a * 100);
        $("#textglow-cp").css('backgroundColor', '#' + rgbToHex(textGlowColor.r, textGlowColor.g, textGlowColor.b));

        if (attach === true)
            attachStylesheet();
    }

    function attachStylesheet(basePath) {
        //if($("#stylesheet-holder").size() == 0) {
        //	$('body').append('<div id="stylesheet-holder"></div>');
        //}

        //	$("#stylesheet-holder").html($('<style type="text/css">' + generateCSS(basePath) + '</style>'));
    }

    function generateCSS(basePath) {
        if (!basePath)
            basePath = "";

        var css =
			backgroundTargets.join(", \n") + "\n" +
			"{\n" +
			"background-color:" + background + ";\n" +
			"}\n\n" +
			backgroundContents.join(", \n") + "\n" +
			"{\n" +
			"background-image:url(" + basePath + imgContent + ");\n" +
			"}\n\n" +
			baseColorTargets.join(", \n") + "\n" +
			"{\n" +
			"background-color:" + baseColor + ";\n" +
			"}\n\n" +
			textTargets.join(", \n") + "\n" +
			"{\n" +
			"color:" + textColor + ";\n" +
			"}\n" +
            highlightColorTargets.join(", \n") + "\n" +
			"{\n" +
			"border-color:" + highlightColor + ";\n" +
			"}\n";


        return css;
    }


    function rgbToHex(r, g, b) {
        var rgb = b | (g << 8) | (r << 16);
        return rgb.toString(16);
    }

}
//
function InitCusThemer(Url) {
    $.ajax({
        url: Url,
        data: {},
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (result) {
            $("head").append(result);
        }

    });

}

// menu

function InitMenuID(sub, child) {
    // Store variables

    var accordion_head = $('.accordion > li > a'),
	    accordion_body = $('.accordion li > .sub-menu');

    accordion_head.eq(sub).addClass('active').next().slideDown('normal');
    if (typeof child != 'undefined')
        $('.accordion').children().eq(sub).children().eq(1).children().eq(child).addClass('active');

}

function InitMenu() {
    // Store variables

    var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');
    // Click function

    accordion_head.on('click', function (event) {

        // Disable header links

        // event.preventDefault();

        // Show and hide the tabs on click

        if ($(this).attr('class') != 'active') {
            accordion_body.slideUp('normal');
            $(this).next().stop(true, true).slideToggle('normal');
            accordion_head.removeClass('active');
            $(this).addClass('active');
        }

    });


    $("#head .account").click(function () {
        if ($('#UserNavigation').is(":hidden"))
            $('#UserNavigation').fadeIn(20, "linear");
        else
            $('#UserNavigation').fadeOut(20, "linear");
    });

    $(document).bind('click', function (e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("UserNavigation")) {
            $('#UserNavigation').fadeOut(20, "linear");
        }
    });
    $('#UserNavigation').bind('click', function (e) {
        $(this).fadeOut(20, "linear");
    });
}